<template>
    <div class="gc-body">
        <FullHeadImg backImage="global/global_card_bg.png">
            <template #default>
                <h1>
                    Spend Crypto for Your Daily and Corporate Expenses
                </h1>
                <img v-if="!isSmallScreen" class="phone-right" :src="getImage('global/coin_phone.png')" alt="">
            </template>
        </FullHeadImg>

        <section class="gc-phone body-m">
            <p>
                Kickstart your crypto payment journey with <span>Honeybee</span> -- swift, seamless, and secure.
            </p>
            <div class="phone-left-item gradient-card">
                <div class="phone-item-desc">
                    Easily make blockchain payments using your crypto, including <span>BTC, ETH, USDC, USDT,</span>
                    and more.
                </div>
                <div class="phone-imgs">
                    <img v-for="(img, idx) in easilyImages" :key="idx" :src="getImage(img)" alt="">
                </div>
            </div>
            <div class="phone-left-item gradient-card">
                <p class="phone-item-desc">
                    Deposit via top blockchains like <span>Bitcoin, Ethereum, Solana, BSC, Polygon, Tron,</span> and
                    others.
                </p>
                <div class="phone-imgs">
                    <img v-for="(img, idx) in depositImages" :key="idx" :src="getImage(img)" alt="">
                </div>
            </div>
        </section>

        <section class="gc-settle-bill body-m">
            <h2>Settle Bills with Fiat or Digital Currencies, Anytime, Anywhere</h2>
            <div class="settle-bill-content">
                <img :src="getImage('global/global_card_settle.png')" alt="">
                <div class="settle-bill-right">
                    <p>
                        Flexible Balance Repayment: Pay your monthly Honeybee Card bill using either fiat or digital
                        currencies.
                    </p>
                    <p>
                        Whether you prefer traditional currency or want to leverage your digital asset holdings, our
                        corporate card gives you the freedom to choose how and when to settle your balance.
                    </p>
                </div>
            </div>
        </section>

        <section class="gc-corporate-card body-m">
            <h2>The Corporate Card for Global Teams of Any Size</h2>
            <p>
                Designed to meet the needs of businesses everywhere, our corporate card offers seamless access with no
                bank account or complex requirements.
            </p>
            <img :src="getImage('global/global_card_corporate.png')" alt="">
        </section>

        <section class="gc-benefits body-m">
            <h2>Benefits of Honeybee corporate card</h2>
            <div class="benefits-cards">
                <div class="gradient-card" v-for="(item, idx) in benefits" :key="idx">
                    <p class="benefit-card-title">{{ item.title }}</p>
                    <p class="benefit-card-desc">{{ item.desc }}</p>
                </div>
            </div>
        </section>
        <ReadyGetStart />
        <section></section>
    </div>
</template>

<script setup lang="ts" name="GloablClass">
import ReadyGetStart from '@/components/ReadyGetStart.vue';
import { useScreenSize } from '@/utils/useScreenSize';
const { isSmallScreen } = useScreenSize()

const easilyImages = [
    'global/coin_btc.png',
    'global/coin_eth.png',
    'global/coin_usdc.png',
    'global/coin_usdt.png'
]

const depositImages = [
    'global/coin_btc.png',
    'global/coin_eth.png',
    'global/coin_solana.png',
    'global/coin_bsc.png',
    'global/coin_polygon.png',
    'global/coin_tron.png',
]

const benefits = [
    {
        title: 'Transaction monitoring',
        desc: 'Utilize advanced transaction monitoring toll to protect your digital asset repayments and collateral',
    },
    {
        title: 'Fraud prevention',
        desc: 'Robust fraud prevention measures, including 2FA login, 3DS, and additional security protocols',
    },
    {
        title: 'Transaction blocking',
        desc: 'Automatically block high-risk transactions using Visa Risk Manager (VRM) to prevent potential fraud',
    },
    {
        title: 'Freeze cards',
        desc: 'Easily freeze cards at any time to prevent unauthorized transactions and safeguard against fraud',
    }
]

</script>

<style scoped lang="scss">
.gc-body {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4rem;

    :deep(.full-bg-content) {

        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;

        img {
            width: 40%;
        }
    }
}

.gc-phone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;

    span {
        font-weight: bold;
    }

    .phone-left-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;

        .phone-item-desc {
            max-width: 50%;
        }

        .phone-imgs {
            img {
                height: 45px;
                padding-right: 1rem;
            }
        }
    }
}

.gc-settle-bill {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;

    .settle-bill-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;

        img {
            height: 40vh;
        }
    }

    .settle-bill-right {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .settle-bill-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: $primary-color;
        }
    }
}

.gc-corporate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;

    .corporate-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: $primary-color;
    }

    img {
        width: 100%;
    }
}

.gc-benefits {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .benefits-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;

        .benefit-card-title {
            font-size: 1.1rem;
            font-weight: bold;
            padding-bottom: 1rem;
        }
    }
}

@media (max-width: 650px) {
    .gc-body {
        gap: 2rem;
    }

    .gc-phone {
        .phone-left-item {
            flex-direction: column-reverse;
            align-items: flex-start;

            .phone-item-desc {
                max-width: 100%;
            }

            .phone-imgs {
                width: 100%;

                img {
                    height: 30px;
                }
            }
        }
    }

    .settle-bill-content {
        flex-direction: column;

        .settle-bill-right {
            width: 100%;
        }
    }

    .gc-benefits {
        .benefits-cards {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}
</style>